<!--
 * @Descripttion: 添加/修改appID
 * @version: 
 * @Author: zhangfan
 * @email: 2207044692@qq.com
 * @Date: 2021-04-15 18:00:38
 * @LastEditors: zhangfan
 * @LastEditTime: 2021-05-12 11:06:22
-->

<template>
  <div class="container">
    <topTitle
      :titleText="headline"
      :back="true"
      @gobackTriser="goBack"
    ></topTitle>
    <div class="mainCon">
      <el-row>
        <el-col :span="24">
          <div class="blockquote">基本信息</div>
        </el-col>
      </el-row>
      <el-row class="detailInfo">
        <el-row class="searchBox searchInputWidth">
          <el-form
            :inline="true"
            :model="formData"
            ref="tableForm"
            label-width="130px"
            :rules="rulesAccountForm"
          >
            <el-form-item
              label="单位名称"
              class="row-padding-bottom"
              prop="companyName"
            >
              <el-select
                placeholder="请选择"
                :disabled="isDisabledCompanyName"
                v-model="companyName"
                @change="selectChanged"
              >
                <el-option
                  v-for="(item, index) in inputNameOption"
                  :key="index"
                  :label="item.name"
                  :value="index"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item
              label="单位类型"
              class="row-padding-bottom"
              prop="inputTypeName"
            >
              <el-input
                disabled
                placeholder="请输入"
                clearable
                v-model="inputTypeName"
              />
            </el-form-item>
            <el-form-item
              label="有效期"
              class="row-padding-bottom"
              prop="effectiveEndDate"
            >
              <el-radio-group v-model="radio" @change="agreeChange">
                <el-radio :label="1">永久有效</el-radio>
                <el-radio :label="0">指定时间</el-radio>
              </el-radio-group>
              <el-date-picker
                :disabled="isDisabled"
                v-model="effectiveEndDate"
                type="date"
                placeholder="选择失效日期"
                value-format="yyyy-MM-dd"
                @change="selectTime"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item
              label="测试服登录地址"
              class="row-padding-bottom"
              prop="testAddress"
            >
              <el-input
                maxlength="300"
                placeholder="请输入"
                clearable
                v-model="formData.testAddress"
              />
            </el-form-item>
          </el-form>
        </el-row>
      </el-row>
      <el-row>
        <el-col :span="24">
          <div class="blockquote">接口配置</div>
        </el-col>
      </el-row>
      <el-row class="detailInfo">
        <el-col :span="24">
          <div class="grid-content bg-purple">
            <el-row class="searchBox searchInputWidth">
              <el-form
                :inline="true"
                :model="filterField"
                ref="accountForm"
                style="float: right"
              >
                <el-form-item>
                  <el-button
                    class="commonBut saveBtn funComBut"
                    icon="icon iconfont icontianjia"
                    @click="addFirstDeposit"
                  >
                    <span class="opetareText">添加</span>
                  </el-button>
                </el-form-item>
              </el-form>
            </el-row>
            <!-- 表格 -->
            <el-table
              max-height="295px"
              :data="tableData"
              :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
              highlight-current-row
              stripe
              v-loading="loading"
              style="border: 1px solid #dfe6ec"
            >
              <el-table-column label="接口名称" width="230">
                <template slot-scope="scope">
                  <copyText
                    :tableIndex="scope.$index"
                    :copyTextName="scope.row.cnName"
                    :columnName="'cnName'"
                  ></copyText>
                </template>
              </el-table-column>
              <el-table-column
                align="center"
                prop="methodName"
                label="Method"
                :formatter="formatTd"
              ></el-table-column>
              <el-table-column
                align="center"
                prop="qps"
                label="QPS"
                :formatter="formatTd"
              >
              </el-table-column>
              <el-table-column align="center" prop="enabled" label="状态">
                <template slot-scope="scope">
                  <el-switch
                    class="switch"
                    v-model="scope.row.enabled"
                    active-color="#13ce66"
                    inactive-color="#ff4949"
                    active-value="ENABLED"
                    inactive-value="DISABLE"
                    active-text="启用"
                    inactive-text="停用"
                    @change="changStatus($event, scope.row)"
                  >
                    >
                  </el-switch>
                </template>
              </el-table-column>
              <el-table-column
                align="left"
                label="操作"
                width="250px"
                fixed="right"
              >
                <template slot-scope="scope">
                  <div>
                    <el-link type="primary" @click="editQps(scope.row)"
                      >修改QPS</el-link
                    >
                    <el-link
                      type="danger"
                      @click="handleDelete(scope.$index, scope.row)"
                      >删除</el-link
                    >
                  </div>
                </template>
              </el-table-column>
              <div slot="empty" v-show="isShow">
                <emptyTable emptyText="暂无相关信息"></emptyTable>
              </div>
            </el-table>
          </div>
        </el-col>
      </el-row>
      <div style="text-align: center; margin-top: 20px">
        <el-button @click.native="cancelAddAppid" class="commonBut cancelBtn"
          >取消</el-button
        >
        <el-button
          type="primary"
          @click.native="saveUserRole"
          :loading="isAdd"
          class="commonBut saveBtn"
          >保存</el-button
        >
      </div>
    </div>
    <!--添加-->
    <el-dialog
      title="添加接口"
      :visible.sync="formVisible"
      :close-on-click-modal="false"
      @close="handleCloseForm"
      custom-class="dialog-minwidth"
      width="700px"
      :modal-append-to-body="false"
    >
      <div>
        <el-checkbox
          :indeterminate="isIndeterminate"
          v-model="checkAll"
          @change="handleCheckAllChange"
          >全选</el-checkbox
        >
        <div style="margin: 15px 0"></div>
        <el-checkbox-group
          v-model="checkboxGroup1"
          size="small"
          @change="handleChecked"
        >
          <el-checkbox
            v-for="(item, index) in interfaceList"
            :label="item.id"
            :key="index"
            border
            >{{ item.cnName }}</el-checkbox
          >
        </el-checkbox-group>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="handleCloseForm" class="cancel"
          >取消</el-button
        >
        <el-button
          type="primary"
          @click.native="toSaveManualPostback"
          class="save"
          :loading="canLogin"
          >保存</el-button
        >
      </div>
    </el-dialog>
    <!--修改QPS-->
    <el-dialog
      title="修改QPS"
      :visible.sync="qpsVisible"
      :close-on-click-modal="false"
      @close="handleCloseQpsInput"
      custom-class="dialog-minwidth"
      width="500px"
      :modal-append-to-body="false"
    >
      <!-- <div>
        <el-input v-model="qpsInput" placeholder="请输入内容"></el-input>
      </div> -->
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        class="demo-ruleForm"
      >
        <el-form-item prop="qps">
          <el-input v-model="ruleForm.qpsInput"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="handleCloseQpsInput" class="cancel"
          >取消</el-button
        >
        <el-button
          type="primary"
          @click.native="toSaveQpsInput('ruleForm')"
          class="save"
          :loading="canLogin"
          >保存</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'addAppid',
  data() {
    // 限制正整数
    var isNumber = (rule, value, callback) => {
      let ret = /^([0-9]*)$/
      if (value === '') {
        callback(new Error('不能为空'))
      } else if (!ret.test(this.ruleForm.qpsInput)) {
        callback(new Error('输入正整数'))
      } else {
        callback()
      }
    }
    return {
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() < Date.now()
        },
      },
      projectInfo: {},
      ruleForm: {
        qpsInput: '',
      },
      rules: {
        qps: [{ required: true, validator: isNumber, trigger: 'blur' }],
      },
      rulesAccountForm: {
        companyName: [
          { required: true, message: '请选择单位名称', trigger: 'blur' },
        ],
        effectiveEndDate: [
          { required: true, message: '请指定有效期', trigger: 'blur' },
        ],
        testAddress: [
          { required: true, message: '请输入测试服登录地址', trigger: 'blur' },
        ],
      },
      checkboxGroup1: [],
      isIndeterminate: true,
      checkAll: false,
      checkedList: [],
      interfaceList: [],
      arrInterfaceList: [],
      inputNameOption: [],
      basicData: [],
      radio: 1,
      qpsInput: '',
      changeId: '',
      inputTypeName: '',
      companyName: '',
      value1: '',
      effectiveEndDate: '',
      formVisible: false,
      isDisabled: true,
      qpsVisible: false,
      canLogin: false,
      isDisabledCompanyName: false,
      userId: '',
      formData: {
        userId: '',
        companyName: '',
        testAddress: '',
        effectiveEndDate: '4712-12-31',
        details: [],
      },
      filterField: {
        cnName: '',
        enabled: '',
      },
      tableData: [],
      baseDate: [],
      loading: false,
      isShow: false,
      headline: '添加appID',
      id: '',
      type: '',
      userServerDetailId: '',
      isShowDialog: false,
      isAdd: false,
      appidPage: '',
    }
  },
  created() {
    this.id = this.$route.query.id
    this.type = this.$route.query.type
    this.appidPage = this.$route.query.appId
    if (this.$route.query.id) {
      this.headline = '修改appId信息'
      this.getDetail()
      this.getApiSet()
      this.isDisabledCompanyName = true
      this.formData.id = this.$route.query.id
    }
    this.getInputNameOption()
  },
  methods: {
    /**
     * @description:实现全选/反选
     * @param {*} value
     */
    handleCheckAllChange(val) {
      this.checkboxGroup1 = val ? this.arrInterfaceList : []
      let arr = this.checkboxGroup1
      let arr2 = this.interfaceList
      let arrList = arr2.filter((val, i) => {
        return arr.includes(val.id)
      })
      arrList.forEach((item) => {
        item.qps = 5
      })
      this.checkedList = arrList
      this.isIndeterminate = false
    },
    /**
     * @description: 获取接口基本信息
     */
    getDetail() {
      const vm = this
      this.axios({
        method: 'post',
        data: { id: vm.id },
        url: 'api-m/inputUserAuth/base/v1/detail',
      })
        .then(
          (response) => {
            if (!response.data.hasError) {
              vm.formData.testAddress = response.data.result.testAddress
              if (response.data.result.effectiveEndDate != '4712-12-31') {
                vm.radio = 0
                vm.isDisabled = false
                vm.effectiveEndDate = response.data.result.effectiveEndDate
                vm.formData.effectiveEndDate =
                  response.data.result.effectiveEndDate
              } else {
                vm.radio = 1
              }
              vm.getprojectName(response.data.result.userId)
            } else {
            }
          },
          (response) => {}
        )
        .catch((error) => {})
    },
    /**
     * @description: 获取接口基本信息
     */
    getprojectName(userId) {
      const vm = this
      this.axios({
        method: 'post',
        data: { id: userId },
        url: 'api-m/inputUser/base/v1/detail',
      })
        .then(
          (response) => {
            if (!response.data.hasError) {
              vm.companyName = response.data.result.name
              vm.formData.companyName = response.data.result.name
              vm.formData.userId = response.data.result.id
              vm.inputTypeName = response.data.result.inputTypeName
              let userId = response.data.result.id
              this.getUserServerDetailId(userId)
            } else {
            }
          },
          (response) => {}
        )
        .catch((error) => {})
    },
    /**
     * @description: 选择日期
     */
    selectTime(val) {
      if (val) {
        this.formData.effectiveEndDate = val
      } else {
        this.formData.effectiveEndDate = ''
      }
    },
    /**
     * @description: 选的接口
     */
    handleChecked(val) {
      let checkedCount = val.length
      this.checkAll = checkedCount === this.arrInterfaceList.length
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.arrInterfaceList.length
      let arr = this.checkboxGroup1
      let arr2 = this.interfaceList
      let arrList = arr2.filter((val, i) => {
        return arr.includes(val.id)
      })
      arrList.forEach((item) => {
        item.qps = 5
      })
      this.checkedList = arrList
    },
    agreeChange: function (value) {
      if (value == 1) {
        this.isDisabled = true
        this.effectiveEndDate = ''
        this.formData.effectiveEndDate = '4712-12-31'
      } else {
        this.formData.effectiveEndDate = ''
        this.isDisabled = false
      }
    },
    /**
     * @description: 获取单位名称列表
     */
    getInputNameOption() {
      this.axios({
        method: 'post',
        data: {
          name: '',
          enabled: 'ENABLED',
          status: 'APPROVED',
          type: 'INPUT',
        },
        url: 'api-m/inputUser/base/v1/page',
      })
        .then(
          (response) => {
            if (!response.data.hasError) {
              this.inputNameOption = response.data.result.results
              if (this.$route.query.companyName) {
                let obj = {}
                obj = this.inputNameOption.find(
                  (item) => item.name === this.$route.query.companyName
                )
                this.companyName = this.$route.query.companyName
                this.inputTypeName = obj.inputTypeName
                this.formData.userId = obj.id
                this.formData.companyName = obj.name
                let userId = obj.id
                this.getUserServerDetailId(userId)
              }
            } else {
            }
          },
          (response) => {}
        )
        .catch((error) => {})
    },
    /**
     * @description: 获取接口配置
     */
    getApiSet() {
      const vm = this
      this.axios({
        method: 'post',
        data: { authId: vm.id },
        url: 'api-m/inputUserAuthDetail/base/v1/page',
      })
        .then(
          (response) => {
            if (!response.data.hasError) {
              vm.tableData = response.data.result.results
              let obj = JSON.parse(JSON.stringify(this.tableData))
              let arr = []
              if (obj) {
                for (let i = 0; i < obj.length; i++) {
                  arr.push(obj[i].serverDetailId)
                }
              }
              this.checkboxGroup1 = arr

              let newArr = []
              let newArrTwo = []
              vm.tableData.forEach((item, i) => {
                let obj = {}
                obj.enabled = item.enabled
                obj.qps = item.qps
                obj.serverDetailId = item.serverDetailId
                newArr.push(obj)
              })
              vm.tableData.forEach((item, i) => {
                newArrTwo.push(item.cnName)
              })
              vm.formData.details = JSON.stringify(newArr)
            } else {
            }
          },
          (response) => {}
        )
        .catch((error) => {})
    },
    /**
     * @description: 获取serverDetailId
     */
    getUserServerDetailId(userId) {
      this.axios({
        method: 'post',
        data: { userId: userId },
        url: 'api-m/inputUserServer/base/v1/list',
      })
        .then(
          (response) => {
            if (!response.data.hasError) {
              let userServerDetailId = response.data.result[0].serverId
              this.getInterfaceList(userServerDetailId)
            } else {
            }
          },
          (response) => {}
        )
        .catch((error) => {})
    },
    /**
     * @description: 获取添加接口列表
     */
    getInterfaceList(userServerDetailId) {
      this.axios({
        method: 'post',
        data: { serverId: userServerDetailId },
        url: 'api-m/inputServerDetail/base/v1/list',
      })
        .then(
          (response) => {
            if (!response.data.hasError) {
              this.interfaceList = response.data.result
              this.baseDate = response.data.result
              this.basicData = response.data.result
              response.data.result.forEach((item) => {
                item.qps = 5
              })
              // this.checkedList = response.data.result;
              let obj = JSON.parse(JSON.stringify(this.interfaceList))
              let arr = []
              if (obj) {
                for (let i = 0; i < obj.length; i++) {
                  arr.push(obj[i].id)
                }
              }
              // this.checkboxGroup1 = arr;
              this.arrInterfaceList = arr
            } else {
            }
          },
          (response) => {}
        )
        .catch((error) => {})
    },
    /**
     * @description: 单位名称选择
     */
    selectChanged(value) {
      let obj = JSON.parse(JSON.stringify(this.inputNameOption[value]))
      this.inputTypeName = obj.inputTypeName
      this.formData.userId = obj.id
      this.formData.companyName = obj.name
      let userId = obj.id
      this.getUserServerDetailId(userId)
    },
    /**
     * @description: 删除QPS
     */
    handleDelete(index, row) {
      const vm = this
      this.$confirm('确认删除吗?', '提示', {
        cancelButtonClass: 'btn-custom-cancel',
        type: 'warning',
      })
        .then(() => {
          vm.tableData.splice(index, 1)

          console.log(this.tableData)

          let newArr = []
          vm.tableData.forEach((item, i) => {
            let obj = {}
            obj.enabled = item.enabled
            obj.qps = item.qps
            obj.serverDetailId = item.serverDetailId
            newArr.push(obj)
          })

          let newArrCheckbox = []
          vm.tableData.forEach((item, i) => {
            newArrCheckbox.push(item.serverDetailId)
          })

          vm.checkboxGroup1 = newArrCheckbox

          let arr = this.checkboxGroup1
          let arrTwo = this.interfaceList
          let arrListTwo = arrTwo.filter((val, i) => {
            return arr.includes(val.id)
          })
          arrListTwo.forEach((item) => {
            item.qps = 5
          })
          this.checkedList = arrListTwo

          let arr2 = this.basicData
          let newArrTwo = []
          vm.tableData.forEach((item, i) => {
            newArrTwo.push(item.cnName)
          })

          let arrList = arr2.filter((val, i) => {
            return !newArrTwo.includes(val.cnName)
          })

          // this.interfaceList = arrList;

          vm.formData.details = JSON.stringify(newArr)

          this.$message({
            message: '删除成功',
            type: 'success',
          })
        })
        .catch(() => {})
    },
    /**
     * @description: 添加接口保存
     */
    toSaveManualPostback() {
      const vm = this
      vm.formVisible = false
      let arr2 = vm.checkedList

      let newArrThree = []

      vm.checkedList.forEach((item, i) => {
        newArrThree.push(item.cnName)
      })

      let arrListThree = vm.tableData.filter((val, i) => {
        return newArrThree.includes(val.cnName)
      })

      let newArrTwo = []
      vm.tableData.forEach((item, i) => {
        newArrTwo.push(item.cnName)
      })

      let arrList = arr2.filter((val, i) => {
        return !newArrTwo.includes(val.cnName)
      })

      let arrListTwo = []
      arrList.forEach((item, i) => {
        let obj = {}
        obj.cnName = item.cnName
        obj.code = item.code
        obj.createTime = item.createTime
        obj.creatorId = item.creatorId
        obj.effectiveEndDate = item.effectiveEndDate
        obj.effectiveStartDate = item.effectiveStartDate
        obj.enabled = item.enabled
        obj.enabledName = item.enabledName
        obj.isDeleted = item.isDeleted
        obj.methodName = item.methodName
        obj.remark = item.remark
        obj.serverId = item.serverId
        obj.updateTime = item.updateTime
        obj.updaterId = item.updaterId
        obj.enabled = item.enabled
        obj.cnName = item.cnName
        obj.methodName = item.methodName
        obj.qps = item.qps
        obj.serverDetailId = item.id
        arrListTwo.push(obj)
      })

      vm.tableData = arrListThree.concat(arrListTwo)

      let newArr = []
      vm.tableData.forEach((item, i) => {
        let obj = {}
        obj.enabled = item.enabled
        obj.qps = item.qps
        obj.serverDetailId = item.serverDetailId
        newArr.push(obj)
      })
      vm.formData.details = JSON.stringify(newArr)
    },
    cancelAddAppid() {
      this.goBack()
    },
    /**
     * @description: 添加appid保存
     */
    saveUserRole() {
      const vm = this
      this.$refs.tableForm.validate((valid) => {
        if (valid) {
          if (vm.tableData.length != 0) {
            this.isAdd = true
            let urlAppid = ''
            if (vm.type == 'modify') {
              urlAppid = 'api-m/inputUserAuth/base/v1/update'
            } else {
              urlAppid = 'api-m/inputUserAuth/base/v1/add'
            }
            this.axios({
              method: 'post',
              url: urlAppid,
              data: this.formData,
            })
              .then((res) => {
                if (!res.data.hasError) {
                  this.isAdd = false
                  if (vm.type == 'modify') {
                    this.$message({
                      message: '修改成功',
                      type: 'success',
                    })
                  }
                  if (
                    this.inputTypeName == '政府' ||
                    this.inputTypeName == '第三方平台'
                  ) {
                    this.$confirm(
                      '该appld需添加指定对接项目，否则无法上传数据，是否前往添加?',
                      {
                        confirmButtonText: '前往添加',
                        cancelButtonText: '返回列表',
                        type: 'warning',
                      }
                    )
                      .then(() => {
                        this.$router.push({
                          path: '/home/interfacePlatform/designatedItemJs',
                          name: 'designatedItemJs',
                          query: {
                            authId: this.id,
                            typePage: 'jszs',
                          },
                        })
                        this.$store.commit('CHANGE_SLIDER_NAME', {
                          oldUrl: '/home/interfacePlatform/equipmentAppidJs',
                          newUrl: this.$router.currentRoute.fullPath,
                        })
                      })
                      .catch(() => {
                        this.$message({
                          message: '添加成功',
                          type: 'success',
                        })
                        vm.goBack()
                      })
                    this.isAdd = false
                  } else {
                    this.isAdd = false
                    vm.goBack()
                  }
                } else {
                  this.isAdd = false
                  this.$message({
                    type: 'error',
                    message: res.data.errorMsg,
                  })
                }
              })
              .catch((error) => {
                this.$message.error('保存失败')
              })
          } else {
            this.$message({
              type: 'warning',
              message: '请添加接口!',
            })
          }
        } else {
          return false
        }
      })
    },
    /**
     * @description: 添加接口
     */
    addFirstDeposit() {
      const vm = this
      if (!vm.inputTypeName == '') {
        vm.formVisible = true
        let obj = JSON.parse(JSON.stringify(vm.tableData))
        let arr = []
        if (obj) {
          for (let i = 0; i < obj.length; i++) {
            arr.push(obj[i].serverDetailId)
          }
        }
        vm.checkboxGroup1 = arr
      } else {
        this.$message({
          type: 'warning',
          message: '请先添加单位名称!',
        })
      }
    },
    /**
     * @description: 修改QPS
     */
    editQps(row) {
      const vm = this
      vm.qpsVisible = true
      vm.changeId = row.serverDetailId
      vm.ruleForm.qpsInput = row.qps
    },
    /**
     * @description: 保存修改QPS
     */
    toSaveQpsInput(formName) {
      const vm = this
      this.$refs[formName].validate((valid) => {
        if (valid) {
          vm.qpsVisible = false
          let obj = {}
          let index = ''
          vm.tableData.forEach((item, i) => {
            if (item.serverDetailId == vm.changeId) {
              index = i
              item.qps = vm.ruleForm.qpsInput
              obj = item
            }
          })
          vm.$set(vm.tableData, index, obj)
          let newArr = []
          vm.tableData.forEach((item, i) => {
            let obj = {}
            obj.enabled = item.enabled
            obj.qps = item.qps
            obj.serverDetailId = item.serverDetailId
            newArr.push(obj)
          })
          vm.formData.details = JSON.stringify(newArr)
          this.$message({
            type: 'success',
            message: '修改成功!',
          })
        } else {
          return false
        }
      })
    },
    /**
     * @description: 关闭修改QPS弹框
     */
    handleCloseQpsInput() {
      const vm = this
      vm.qpsVisible = false
    },
    handleCloseForm() {
      this.formVisible = false
    },
    /**
     * @description: 切换状态
     * @param {*} index
     * @param {*} row
     */
    changStatus($event, row) {
      const vm = this
      if (row.enabled == 'ENABLED') {
        let obj = {}
        let index = ''
        vm.tableData.forEach((item, i) => {
          if (item.id == vm.changeId) {
            index = i
            item.enabled = 'ENABLED'
            obj = item
          }
        })
        vm.$set(vm.tableData, index, obj)
        let newArr = []
        vm.tableData.forEach((item, i) => {
          let obj = {}
          obj.enabled = item.enabled
          obj.qps = item.qps
          obj.serverDetailId = item.serverDetailId
          newArr.push(obj)
        })
        vm.formData.details = JSON.stringify(newArr)
      } else {
        let obj = {}
        let index = ''
        vm.tableData.forEach((item, i) => {
          if (item.id == vm.changeId) {
            index = i
            item.enabled = 'DISABLE'
            obj = item
          }
        })
        vm.$set(vm.tableData, index, obj)
        let newArr = []
        vm.tableData.forEach((item, i) => {
          let obj = {}
          obj.enabled = item.enabled
          obj.qps = item.qps
          obj.serverDetailId = item.serverDetailId
          newArr.push(obj)
        })
        vm.formData.details = JSON.stringify(newArr)
      }
    },
    getTableList(data) {
      this.tableData = data
      this.loading = false
      if (this.tableData.length < 1) {
        this.isShow = true
      }
    },
    goBack() {
      if (this.type == 'modify') {
        this.$router.push({
          path: '/home/interfacePlatform/equipmentAppidDetailJs',
          name: 'equipmentAppidDetailJs',
          query: {
            id: this.id,
            appId: this.appidPage,
            typePage: 'jszs',
          },
        })
        this.$store.commit('CHANGE_SLIDER_NAME', {
          oldUrl: '/home/interfacePlatform/equipmentAppidJs',
          newUrl: this.$router.currentRoute.fullPath,
        })
      } else {
        this.$router.push('/home/interfacePlatform/equipmentAppidJs')
        this.$store.commit('CHANGE_SLIDER_NAME', {
          oldUrl: '/home/interfacePlatform/equipmentAppidJs',
          newUrl: this.$router.currentRoute.fullPath,
        })
      }
    },
  },
}
</script>
<style scoped lang="less">
.mainCon {
  top: 194px;
  padding: 24px;
}

.blockquote {
  color: #333;
  font: bold 16px Microsoft YaHei;
  border-bottom: 1px solid #dee5f4;
  height: 35px;
}

.blockquote:before {
  background-color: #009588;
  content: '';
  padding: 2px;
  margin-right: 10px;
}

.labelWidth {
  width: 126px;
  font-size: 14px;
  color: #666666;
  display: inline-block;
  height: 36px;
  text-align: right;
}

.information {
  font-size: 14px;
  color: #151515;
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}

.detailInfo {
  padding: 18px 0 5px 0;
}

.detailInfoItem {
  margin-top: 28px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.tag-item {
  color: #ffffff !important;
  font-size: 12px;
  border-radius: 0px;
  height: 20px;
  line-height: 18px;
  width: 60px;
  margin-left: 12px;
}

/deep/ label.el-checkbox.el-checkbox--small {
  width: 180px;
  margin-bottom: 20px;
}

/deep/ .el-checkbox.is-bordered + .el-checkbox.is-bordered {
  margin-left: 0px;
}

/* switch按钮样式 */
/deep/.switch .el-switch__label {
  position: absolute;
  display: none;
  color: #fff !important;
}
/*打开时文字位置设置*/
/deep/.switch .el-switch__label--right {
  z-index: 1;
}
/* 调整打开时文字的显示位子 */
/deep/.switch .el-switch__label--right span {
  margin-right: 9px;
}
/*关闭时文字位置设置*/
/deep/.switch .el-switch__label--left {
  z-index: 1;
}
/* 调整关闭时文字的显示位子 */
/deep/.switch .el-switch__label--left span {
  margin-left: 9px;
}
/*显示文字*/
/deep/.switch .el-switch__label.is-active {
  display: block;
}
/* 调整按钮的宽度 */
/deep/.switch.el-switch .el-switch__core,
/deep/.el-switch .el-switch__label {
  width: 70px !important;
  margin: 0;
}
</style>
